<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
    <style>
        #app {
            display: flex;
        }

        .nav {
            border: 5px solid #000;
            width: 150px;
            height: 500px;
            text-align: center;
            font-size: 30px;
        }

        .content {
            border: 5px solid #000;
            width: 500px;
            margin-left: 10px;
        }

        a {
            text-decoration: none;
            color: #000;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- <h2>学校后台管理页面</h2> -->
        <div class="nav">
            <router-link to="/t">教师管理</router-link><br />
            <router-link to="/s">学生管理</router-link><br />
            <router-link to="/h">后勤管理</router-link>

        </div>
        <div class="content">
            <router-view></router-view>

        </div>
    </div>
    <script>
        let teacher = {
            // 视图
            template: `
            <div>我是教师管理</div>
            `,
            // 视图模型
            data() {
                return {
                }
            }
            // 模型

        }
        let student = {
            // 视图
            template: `
            <div>我学生管理
                <div>
                <button @click="aa">成绩管理</button>
                <button @click="aa">学籍管理</button>    
                </div>
                <router-view></router-view>               
            </div>
            `,
            // 视图模型
            data() {
                return {
                }
            },
            methods:{
                aa(e){
                    if(e.target.innerText=='成绩管理'){
                        this.$router.push({
                            path:'/s/cj'
                        })
                    }else{
                        this.$router.push({
                            path:'/s/bj'
                        })
                    }


                }
            }
            // 模型

        }
        let hq = {
            // 视图
            template: `
            <div>我是后勤管理</div>
            `,
            // 视图模型
            data() {
                return {
                }
            }
            // 模型

        }
        let cj = {
            // 视图
            template: `
            <div>我是成绩管理</div>
            `,
            // 视图模型
            data() {
                return {
                }
            }
            // 模型

        }
        let bj = {
            // 视图
            template: `
            <div>我是班级管理</div>
            `,
            // 视图模型
            data() {
                return {
                }
            }
            // 模型

        }
        let router = new VueRouter({
            routes: [
                { path: '/t', component: teacher },
                { path: '/s', component: student ,children:[
                    {path:'cj',component:cj},
                    {path:'bj',component:bj},
                ]},
                { path: '/h', component: hq },
            ]

        })

        let vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            router,
        })
    </script>
</body>

</html>